@import "base/base.less";
@import "module/page-control.less";
@import "module/simple-list.less";

@bodyBG: url("../images/column-list/bg.png") no-repeat;
@itemActiveBg: data-uri('../images/column-list/list-item-focus.png');
@listTitleWidth: 500px;
@itemPadding: 10px;

#title {
  font-size: 38px;
  font-weight: bold;
  .absolute(60px, 66px);
  color: #0b4b9d;
}

#left-box {
  .absolute(60px, 164px);
  .setWH(220px, 496px);
  background: url("../images/column-list/left-bg.png") no-repeat;

  ul{
    font-size: 22px;
    margin-top: 22px;
  }
  li{
    margin-left: 22px;
    margin-top: 5px;
    width: 186px;
    height: 60px;
    .line-height(60px);
    text-align: center;
  }
  li.active{
    background: data-uri("../images/column-list/tab-focus.png") no-repeat;
  }
  li.leave{
    font-weight: bold;
  }
}

.tab-content{
  display: none;
}
#right-box{
  .absolute(296px, 164px);
  .setWH(920px, 496px);
  display: block;

  #textListStyleA{
    background: url("../images/column-list/right-bg.png") no-repeat;
    .setWH(920px,430px);
    overflow: hidden;

    .icon{
      display: inline-block;
      margin-left: 10px;
      vertical-align: top;
      margin-top: 5px;
    }
    .title{
      margin-left: 0;
    }

  }
  #textListStyleB{
    background: url("../images/column-list/right-bg.png") no-repeat;
    .setWH(920px,430px);
    overflow: hidden;
    .title{
      width: 560px;
      margin-left: 0;
    }

  }

  #imgListStyleA{
    .list-item {
      position: absolute;
      width:301px;
      overflow: hidden;
      .list-item-wrap {
        overflow: hidden;
        position: relative;
        margin: 4px;
        .setWH(293px, 238px);
      }
      &.active {
        background-color: white;
      }
      .preview-img {
        position: absolute;
        .setWH(293px, 238px);
        img{
          .setWH(100%,100%);
        }
      }
      .play-btn {
        .absolute(50%, 50%);
        margin-top: -25px;
        margin-left: -25px;
      }
      .title {
        position: absolute;
        background: data-uri("../images/column-list/title-mask.png") no-repeat;
        .setWH(293px, 40px);
        text-align: center;
        bottom: 0;
        .line-height(40px);
        .ellipsis;
      }
    }
  }

  #videoListStyleA{
    .list-item {
      position: absolute;
      width:301px;
      overflow: hidden;
      .list-item-wrap {
        overflow: hidden;
        position: relative;
        margin: 4px;
        .setWH(293px, 238px);
      }
      &.active {
        background-color: white;
      }
      .preview-img {
        position: absolute;
        .setWH(293px, 238px);
        img{
          .setWH(100%,100%);
        }
      }
      .play-btn {
        .absolute(50%, 50%);
        margin-top: -25px;
        margin-left: -25px;
      }
      .title {
        position: absolute;
        background: data-uri("../images/column-list/title-mask.png") no-repeat;
        .setWH(293px, 40px);
        text-align: center;
        bottom: 0;
        .line-height(40px);
        .ellipsis;
      }
    }
  }

  #customListStyleA{
    .list-item {
      position: absolute;
      margin-top: -4px;
      .setWH(302px,438px);
      overflow: hidden;
      .list-item-wrap {
        overflow: hidden;
        position: relative;
        margin: 4px;
        background: url("../images/column-list/custom-a-block.png") no-repeat;
        .setWH(294px, 430px);
        line-height: 430px;
        text-align: center;
        font-size: 22px;
        font-weight: bold;
      }
      &.active {
        background: url("../images/column-list/custom-a-block-focus.png") no-repeat;
      }
    }
  }
}

#page {
  .absolute(590px, 636px);
}
